<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
    <style>
        #mySectionPlanesOverviewCanvas {
            position: absolute;
            width: 250px;
            height: 250px;
            bottom: 70px;
            right: 10px;
            z-index: 200000;
        }
    </style>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<canvas id="mySectionPlanesOverviewCanvas"></canvas>
<div class="slideout-sidebar">
    <img class="info-icon" src="../../assets/images/section_plane_icon.png"/>
    <h1>SectionPlanesPlugin</h1>
    <h2>Slices models open to reveal internal structures</h2>
    <p>This example demonstrates how to create section planes with touch.</p>
    <h3>Components used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
               target="_other">XKTLoaderPlugin</a>

        </li>
        <li>
            <a href="../../docs/class/src/plugins/SectionPlanesPlugin/SectionPlanesPlugin.js~SectionPlanesPlugin.html"
               target="_other">SectionPlanesPlugin</a>
        </li>
    </ul>
    <h3>Resources</h3>
    <ul>
        <li>
            <a href="https://github.com/openBIMstandards/DataSetSchependomlaan"
               target="_other">Model source</a>
        </li>
    </ul>
</div>
</body>

<script type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import { PointerCircle, touchPointSelector, Viewer, XKTLoaderPlugin, SectionPlanesPlugin, math } from "../../dist/xeokit-sdk.min.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas"
    });

    viewer.camera.eye = [-5.02, 2.22, 15.09];
    viewer.camera.look = [4.97, 2.79, 9.89];
    viewer.camera.up = [-0.05, 0.99, 0.02];

    //------------------------------------------------------------------------------------------------------------------
    // Load a model
    //------------------------------------------------------------------------------------------------------------------

    const xktLoader = new XKTLoaderPlugin(viewer);

    const sceneModel = xktLoader.load({
        id: "myModel",
        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
        edges: true
    });

    //------------------------------------------------------------------------------------------------------------------
    // Add a SectionPlanesPlugin - we'll use this to create cross-section planes
    //------------------------------------------------------------------------------------------------------------------

    const sectionPlanes = new SectionPlanesPlugin(viewer, {
        overviewCanvasId: "mySectionPlanesOverviewCanvas",
        overviewVisible: true
    });

    //------------------------------------------------------------------------------------------------------------------
    // Use the SectionPlanesPlugin to create a section plane wherever we tap on an object
    //------------------------------------------------------------------------------------------------------------------

    // This creates a function that will attach touch listeners to canvas, and handle tap events
    const setupTouchSelector = touchPointSelector(
        viewer,
        new PointerCircle(viewer), // needed to indicate tap duration to user
        (orig, dir) => {
            // find an intersection of a ray from the camera through the scene entities
            const pickResult = viewer.scene.pick({
                origin: orig,
                direction: dir,
                pickSurface: true
            });
            return pickResult;
        });

    (function setupCreateSectionPlane(id) {

        const createSectionPlane = pickResult => {
            if (pickResult) {
                // A section plane is created ...
                const sectionPlane = sectionPlanes.createSectionPlane({
                    id: "mySectionPlane" + id,
                    pos: pickResult.worldPos,
                    dir: math.mulVec3Scalar(pickResult.worldNormal, -1)
                });
                sectionPlanes.showControl(sectionPlane.id);
            }
        };

        // ... and touch events are handled through setupTouchSelector callbacks
        setupTouchSelector(
            () => null,                               // onCancel do nothing
            () => null,                               // onChange do nothing
            (canvasPos, worldPos) => {                // onCommit
                if (worldPos) {                       // if the point selected by user was on top
                    createSectionPlane(worldPos);     // of an attachable surface, then create section plane
                    setupCreateSectionPlane(id + 1);  // and move on to the next one
                }
            });
    })(1); // first `id` to start with

</script>
</html>